<template>
<!-- 新歌速递 -->
  <div class="container">
    <div class="recommend">
      <div class="recommend_title">{{ title }}</div>
      <router-link tag="div" :to="{name:'morelist',params:{musictype:type,titles:title}}" class="recommend_more">更多</router-link>
    </div>
    <div class="view">
      <ul>
        <router-link tag="li" :to="{name:'musicplay',params:{songid:item.song_id}}" v-for="(item,index) in today_recommend" :key="index">
          <img :src="item.pic_big" alt="">
          <div class="view_title">{{ item.title }}</div>
        </router-link>
      </ul>
    </div>
    <div class="swiper">
      <swiper class="swiper-container" :options="swiperOption">
        <!-- slides -->
        <swiper-slide>
          <img src="../assets/hanny-naibaho-388579-unsplash.jpg" alt="">
        </swiper-slide>
        <swiper-slide>
          <img src="../assets/malte-wingen-381988-unsplash.jpg" alt="">
        </swiper-slide>
        <swiper-slide>
          <img src="../assets/mohammad-metri-421904-unsplash.jpg" alt="">
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>

  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default {
    name:'swiperBanner',
    data(){
      return{
        today_recommend:[],
        swiperOption:{
          autoplay:true,
          loop:true,
          pagination: {
            el: '.swiper-pagination',
          },
        }
      }
    },
    props:{
      type:{
        type:String,
        default:"2"
      },
      title:{
        type:String,
        default:"新歌速递"
      }
    },
    components:{
      swiper,
      swiperSlide
    },
    mounted(){
      let url = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type=2&size=3&offset=0"
      this.$axios.get(url)
        .then(res => {
          this.today_recommend = res.data.song_list
        })
        .catch(error => {
          console.log(error);
        })
    }
  }
</script>

<style scoped>

.container{
  width: 100%;
  height: 401px;
  margin-top: 10px;
  background-color: white
}

.recommend{
  width: 100%;
  height: 70px;
  display: flex
}

.recommend_title{
  padding: 26px;
  font-size: 20px;
  flex: 1
}

.recommend_more{
  float: right;
  padding: 30px 30px 0 0
}

.view{
  width: 100%;
  height: 141px;
}

.view ul {
  list-style: none;
  height: 141px;
}

.view ul li{
  width: 30.5%;
  height: 132px;
  float: left;
  margin:5px 
}

.view ul li img{
  width: 100%;
  height: 120px;
}

.view_title{
  text-align: center;
  font-size: 10px;
  height: 12px;
  /* 超出一行的文本用省略号显示 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.swiper{
  width: 100%;
  height: 190px;
}

swiper{
  width: 100%;
  height: 189px;
  /* background-color: aqua */
}

.swiper-container{
  height: 179px;
  width: 97%;
  margin: 5px 5px;
}

.swiper-slide img{
  width: 100%;
  height: 179px;
}


</style>